<div class="d-flex border-bottom p-2">
    <button class="btn btn-primary mr-2" (click)="showPresetTplModal()">选择内置模板</button>
    <farris-radiogroup #FarrisRadioGroupComponent [(ngModel)]="showTemplate" [horizontal]="true"
        (changeValue)="changeShowTemplateMode();" [data]="templateRadioGroups">
    </farris-radiogroup>
</div>

<div class="f-utils-fill d-flex">
    <div class="w-50 editor">
        <angular-monaco-editor class="custom-monaco-editor" [options]="codeEditorOptions" [(ngModel)]="bindingTemplate"
            (onInit)="onMonacoInit($event)">
        </angular-monaco-editor>
    </div>
    <farris-tabs [value]="'varMapping'" [contentFill]="true" [autoTitleWidth]="true" class="varMappingTab px-2 h-100">
        <farris-tab title="变量映射" [id]="'varMapping'">
            <ng-template #content>
                <variable-list [variables]="fields" [schemaFields]="editorParams.schemaFields"
                    (variableChanged)="onVariableFieldChanged($event)" (variableAdded)="onVariableFieldAdded($event)"
                    (variableRemoved)="onVariableFieldRemoved($event)" (moveUpVariable)="moveUpVariableField($event)"
                    (moveDownVariable)="moveDownVariableField($event)">
                </variable-list>
            </ng-template>
        </farris-tab>
        <farris-tab title="模板样式" [id]="'customClass'">
            <ng-template #content>
                <div class="farris-group-wrap ">
                    <div class="form-group farris-form-group">
                        <label class="col-form-label">
                            <span class="farris-label-text">模板样式</span>
                        </label>
                        <div class="farris-input-wrap">
                            <input type="input" class="form-control" [(ngModel)]="templateCustomClass"
                                [placeholder]="'请输入模板样式'">
                        </div>
                    </div>
                </div>
            </ng-template>
        </farris-tab>
        <farris-tab title="按钮" [id]="'buttons'" [show]="showTemplate==='buttons'">
            <ng-template #content>
                <template-button-editor [buttons]="toolbar.contents" [viewModelId]="editorParams.viewModelId"
                    (buttonAdded)="onButtonAdded()" (buttonRemoved)="onButtonRemoved($event);" [triggerModalSave]="triggerModalSave"
                    (moveUpButton)="moveUpTemplateButton($event);" (moveDownButton)="moveDownTemplateButton($event);">
                </template-button-editor>
            </ng-template>
        </farris-tab>
    </farris-tabs>
</div>

<ng-template #bindingFooter>
    <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
    <button type="button" class="btn btn-primary" (click)="clickConfirm()">确定</button>
</ng-template>

<ng-template #presetTplRef>
    <app-preset-template-selector #presetTplSeletor [templateUri]="editorParams.templateUri"
        [defaultSelectedTemplateId]='presetTemplateId' (submit)="selectPresetTpl($event)"
        (cancel)="cancelPresetTpl()">
    </app-preset-template-selector>
</ng-template>